import React, { useState, useEffect } from "react";
import axios from "axios";
import style from "./index.module.scss";
import { useNavigate } from "react-router-dom";
import { ShareO, Chat, GoodJob } from "@react-vant/icons";
import { PullToRefresh } from "antd-mobile";
import { sleep } from "antd-mobile/es/utils/sleep";
import { List } from "react-vant";
const Index = () => {
  const navigate = useNavigate();
  const [allData, setAllData] = useState<any>([]);
  //获取列表
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [findished, setFindished] = useState(false);
  //加载数据的函数
  const onLoad = async () => {
    const res = await axios.get("/api/date", {
      params: {
        pageSize,
        currentPage,
      },
    });
    const { data, code } = res.data;
    if (code === 200) {
      //修改页码+1
      setCurrentPage(currentPage + 1);
      //合并数据
      setAllData([...allData, ...data]);
    } else {
      setFindished(true); //数据加载完成
    }
  };
  //监听滚动事件以加载更多数据
  useEffect(() => {
    const handleScoll = () => {
      const { scrollTop, scrollHeight, clientHeight } =
        document.documentElement;
      if (scrollTop + clientHeight >= scrollHeight - 50) {
        onLoad();
      }
    };
    window.addEventListener("scroll", handleScoll);
    return () => window.removeEventListener("scroll", handleScoll);
  }, [currentPage]);
  //点击跳转详情页加一个参数flag=false
  const xq = (id: any) => {
    console.log(id);
    navigate(`/kepuhaoxq/${id}`);
  };
  //点赞+1 再次点击取消点赞
  const dz = async (id: any) => {
    console.log(id);
    await axios.get("/api/date", { params: { id } });
    //让前台数据刷新

    setAllData(
      allData.map((item: any) => {
        if (item.id === id) {
          item.goodflag = !item.goodflag;
          if (item.goodflag) {
            item.reply_num = item.reply_num + 1;
          } else {
            item.reply_num = item.reply_num - 1;
          }
        }
        return item;
      })
    );
  };

  return (
    <div>
      <PullToRefresh
        onRefresh={async () => {
          await sleep(1000);
          //页面刷新后重置数据
          setAllData([]);
          setCurrentPage(1);
          onLoad();
        }}
      >
        <List finished={findished} onLoad={onLoad}>
          {allData.map((item: any, index: any) => (
            <div className={style.list} key={index}>
              <div className={style.listitem }  onClick={() => xq(item.id)}>
                <img src={item.image} alt="" />
                <span>
                  {item.name} {item.type} {item.keshi} {item.hospital}
                </span>
              </div>
              <div className={style.listitem2} onClick={() => xq(item.id)}>
                <h4>{item.shanc}</h4>
              </div>
              <div className={style.listitem3}>
                <div className={style.li1}>
                  <ShareO />
                  分享
                </div>
                <div className={style.li2} onClick={() => xq(item.id)}>
                  <Chat />
                  评论
                </div>
                <div className={style.li3} onClick={() => dz(item.id)}>
                  {item.goodflag ? (
                    <div>
                      <GoodJob color="blue" />
                      {item.reply_num}
                    </div>
                  ) : (
                    <div>
                      <GoodJob color="#ccc" />点赞{item.reply_num}
                    </div>
                  )}
                </div>
              </div>
            </div>
          ))}
        </List>
      </PullToRefresh>
    </div>
  );
};

export default Index;
function handleScoll(this: Window, ev: Event) {
  throw new Error("Function not implemented.");
}
